<script>
export default {
  name: "solarTermFestival",
  data() {
    return {
      solarTermFestivalList: [
        {
          name: '植树节',
          day: '38',
          date: '2022年6月9日',
          dateNL: '五月初八',
          week: '星期一'
        },
        {
          name: '劳动局',
          day: '288',
          date: '2022年6月9日',
          dateNL: '五月初八',
          week: '星期一'
        },
        {
          name: '国庆节',
          day: '288',

          date: '2022年6月9日',
          dateNL: '五月初八',
          week: '星期一'
        },
        {
          name: '中秋节',
          day: '288',
          date: '2022年6月9日',
          dateNL: '五月初八',
          week: '星期一'
        },
        {
          name: '元旦',
          day: '288',
          date: '2022年6月9日',
          dateNL: '五月初八',
          week: '星期一'
        },
        {
          name: '春节',
          day: '288',
          date: '2022年6月9日',
          dateNL: '五月初八',
          week: '星期一'
        },
        {
          name: '清明节',
          day: '288',
          date: '2022年6月9日',
          dateNL: '五月初八',
          week: '星期一'
        },
        {
          name: '秋分',
          day: '288',
          date: '2022年6月9日',
          dateNL: '五月初八',
          week: '星期一'
        },
        {
          name: '春分',
          day: '36',
          date: '2022年6月9日',
          dateNL: '五月初八',
          week: '星期一'
        }
      ]
    }
  }
}
</script>

<template>
  <view class="solarTermFestival">
    <view class="solarTermFestival_search allRowCenter">
      <view class="solarTermFestival_search_content allRowCenter">
        <image class="solarTermFestival_search_content_image" src="/static/shiqin-images/search.png"
               mode="widthFix"></image>
        <text class="solarTermFestival_search_content_text">请输入姓名</text>
      </view>
    </view>
    <view class="solarTermFestival_solarContent mb-27" v-for="(item, index) in solarTermFestivalList" :key="index">
      <image v-if="index%5 === 0" class="solarTermFestival_solarContent_info_image"
             src="/static/shiqin-images/first.png"></image>
      <image v-if="index%5 === 1" class="solarTermFestival_solarContent_info_image"
             src="/static/shiqin-images/second.png"></image>
      <image v-if="index%5 === 2" class="solarTermFestival_solarContent_info_image"
             src="/static/shiqin-images/third.png"></image>
      <image v-if="index%5 === 3" class="solarTermFestival_solarContent_info_image"
             src="/static/shiqin-images/fourth.png"></image>
      <image v-if="index%5 === 4" class="solarTermFestival_solarContent_info_image"
             src="/static/shiqin-images/fifth.png"></image>
      <view class="solarTermFestival_solarContent_content z-1 row items-center justify-between">
        <view class="solarTermFestival_solarContent_content_left ml-36">
          <view class="solarTermFestival_solarContent_content_left_name">
            <text class="solarTermFestival_solarContent_content_left_name_text">{{ item.name }}</text>
          </view>
          <view class="solarTermFestival_solarContent_content_left_describe">
            <text class="solarTermFestival_solarContent_content_left_describe_text">距离植树节还有</text>
          </view>
          <view class="solarTermFestival_solarContent_content_left_dateInfo row items-center">
            <view class="solarTermFestival_solarContent_content_left_dateInfo_date">
              <text class="solarTermFestival_solarContent_content_left_dateInfo_date_text">{{ item.date }}</text>
            </view>
            <view class="solarTermFestival_solarContent_content_left_dateInfo_dateNL ml-36">
              <text class="solarTermFestival_solarContent_content_left_dateInfo_dateNL_text">{{ item.dateNL }}</text>
            </view>
            <view class="solarTermFestival_solarContent_content_left_dateInfo_week ml-36">
              <text class="solarTermFestival_solarContent_content_left_dateInfo_week_text">{{ item.week }}</text>
            </view>
          </view>
        </view>
        <view class="solarTermFestival_solarContent_content_distanceDate">
          <text class="solarTermFestival_solarContent_content_distanceDate_text">{{ item.day }}</text>
          <text class="solarTermFestival_solarContent_content_distanceDate_unit">天</text>
        </view>
        <view class="solarTermFestival_solarContent_content_right mr-17">
          <u-icon name="arrow-right" size="27" color="#E5E5E5"></u-icon>
        </view>
      </view>
    </view>
  </view>
</template>

<style scoped lang="scss">
.solarTermFestival {
  width: 702rpx;

  .solarTermFestival_search {
    width: 702rpx;
    height: 144rpx;
    background: #FFFFFF;
    border-radius: 0rpx 0rpx 20rpx 20rpx;
    border-top: 2rpx solid #E5E5E5;
    overflow: hidden;

    .solarTermFestival_search_content {
      width: 661rpx;
      height: 80rpx;
      background: #E5E5E5;
      border-radius: 40rpx 40rpx 40rpx 40rpx;

      .solarTermFestival_search_content_image {
        width: 32rpx;
        height: 32rpx;
      }

      .solarTermFestival_search_content_text {
        font-family: PingFang SC, PingFang SC;
        font-weight: 500;
        font-size: 26rpx;
        color: #A0A0A0;
      }
    }
  }

  .solarTermFestival_solarContent {
    width: 702rpx;
    height: 179rpx;
    border-radius: 20rpx 20rpx 20rpx 20rpx;
    overflow: hidden;
    position: relative;

    .solarTermFestival_solarContent_info_image {
      position: absolute;
      top: 0;
      left: 0;
      width: 702rpx;
      height: 179rpx;
    }

    .solarTermFestival_solarContent_content {
      position: absolute;
      width: 702rpx;
      height: 179rpx;
      top: 0;
      left: 0;

      .solarTermFestival_solarContent_content_left {
        .solarTermFestival_solarContent_content_left_name {
          .solarTermFestival_solarContent_content_left_name_text {
            font-family: PingFang SC, PingFang SC;
            font-weight: 500;
            font-size: 48rpx;
            color: #033618;
          }
        }

        .solarTermFestival_solarContent_content_left_describe {
          .solarTermFestival_solarContent_content_left_describe_text {
            font-family: PingFang SC, PingFang SC;
            font-weight: 500;
            font-size: 30rpx;
            color: #043618;
          }
        }

        .solarTermFestival_solarContent_content_left_dateInfo {
          .solarTermFestival_solarContent_content_left_dateInfo_date {
            .solarTermFestival_solarContent_content_left_dateInfo_date_text {
              font-family: PingFang SC, PingFang SC;
              font-weight: 500;
              font-size: 24rpx;
              color: #043618;
            }
          }

          .solarTermFestival_solarContent_content_left_dateInfo_dateNL {
            .solarTermFestival_solarContent_content_left_dateInfo_dateNL_text {
              font-family: PingFang SC, PingFang SC;
              font-weight: 500;
              font-size: 24rpx;
              color: #043618;
            }
          }

          .solarTermFestival_solarContent_content_left_dateInfo_week {
            .solarTermFestival_solarContent_content_left_dateInfo_week_text {
              font-family: PingFang SC, PingFang SC;
              font-weight: 500;
              font-size: 24rpx;
              color: #043618;
            }
          }
        }
      }

      .solarTermFestival_solarContent_content_distanceDate {
        position: absolute;
        left: 50%;
        top: 30rpx;
        transform: translateX(-50%);
        .solarTermFestival_solarContent_content_distanceDate_text {
          font-family: PingFang SC, PingFang SC;
          font-weight: 500;
          font-size: 80rpx;
          color: #043618;
        }
        .solarTermFestival_solarContent_content_distanceDate_unit {
          font-family: PingFang SC, PingFang SC;
          font-weight: 500;
          font-size: 30rpx;
          color: #043618;
        }
      }
    }
  }
}
</style>